<template>
  <el-dialog
    class="ui-dialog"
    :class="['ui-dialog--' + size, { 'is-hide-head': hideHead, 'is-closable': closable }]"
    :top="innerTop"
    :append-to-body="true"
    :visible.sync="dialogVisible"
    :title="title"
    :width="width"
    :close-on-press-escape="closable"
    @close="handleClose"
    @open="handleOpen"
    @opened="handleOpended"
    @closed="handleClosed"
    :close-on-click-modal="closeOnClickModal"
  >
    <slot v-if="showContent"></slot>
  </el-dialog>
</template>
<script>
import ElDialog from 'element-ui/lib/dialog'
import 'element-ui/lib/theme-chalk/dialog.css'

export default {
  name: 'UiDialog',
  components: {
    ElDialog
  },
  provide() {
    return {
      UiDialog: this
    }
  },
  model: {
    prop: 'visible',
    event: 'input'
  },
  props: {
    width: {
      type: String
    },
    title: {
      type: String
    },
    size: {
      type: String,
      default: 'small',
      validator: (value) => {
        return ['large', 'medium', 'small', 'mini', 'auto', 'fullscreen'].indexOf(value) >= 0
      }
    },
    closable: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showContent: this.visible
    }
  },
  computed: {
    innerTop () {
      if (this.size === 'fullscreen') {
        return '0'
      }
      return '8vh'
    },
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    hideHead () {
      return !this.title
    }
  },
  methods: {
    handleOpen() {
      this.showContent = true
    },
    handleOpended() {
      this.$emit('opened')
    },
    handleClose() {
      this.$emit('close')
    },
    handleClosed() {
      this.showContent = false
      this.$emit('closed')
    },
    close() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less">
.ui-dialog{
  .el-dialog__header{
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
    background-color: #F9FAFB;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .el-dialog__body{
    color: #404040;
    padding: 0;
  }
  &.is-hide-head {
    .el-dialog__header{
      padding: 0;
      border-bottom: 0;
    }
    .el-dialog__headerbtn{
      top: -12px;
      right: -12px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 50%;
      background-color: #999;
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
      transform: rotate(0deg);
      transition: all .25s;
      i {
        color: #fff;
        font-weight: bold;
        vertical-align: top;
        margin-top: 4px;
      }
      &:hover {
        background-color: #888;
        transform: rotate(180deg);
      }
    }
  }
  &:not(.is-closable){
    .el-dialog__headerbtn{
      display: none;
    }
  }
}
.ui-dialog--small{
  .el-dialog{
    width: 600px;
  }
}
.ui-dialog--mini{
  .el-dialog{
    width: 420px;
  }
}
.ui-dialog--medium{
  .el-dialog{
    width: 740px;
  }
}
.ui-dialog--large{
  .el-dialog{
    width: 1000px;
  }
}
.ui-dialog--fullscreen{
  .el-dialog{
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }
}
.ui-dialog--auto{
  text-align: center;
  .el-dialog{
    text-align: left;
    width: auto;
    display: inline-block;
  }
}
</style>
